@extends('layout.app') @section('content')

<div class="box-body">

    <table id="rowed3"></table>
    <div id="prowed3"></div>

</div>
<!-- CKEDITOR -->
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.upload.js"></script>
<script>
function doUpload() {
    $.upload({
        url: '/product/upload', 
        fileName: 'upload', 
        params: {'_token': '{{csrf_token()}}'},
        dataType: 'json',
        onSend: function() {
                return true;
        },
        onComplate: function(data) {
            if(data.res !== false){
                $('.fileimg').attr('src',data.res);
            }else{
                alert('文件类型错误');
            }
            
        }
    });
}
function editshow(id) {
    $('#'+id).click();
    $('#edit_rowed3').click();
}
    $(document).ready(function() {
        var data = {
            url: "/product",
            colNames: ["商品ID" , "排序" , "商品名称" , "原价" , "折扣价" , "折扣类型", "交易费" , "状态" , "图片" , "操作" , "" , "" , ""],
            colModel: [{
                name: 'id',
                key: true
            }, {
                name: 'sort',
                editable: true,
                editrules: {
                    required: true,
                    number: true,
                }
            }, {
                name: 'name',
                editable: true,
                editrules: {
                    required:true
                }
            },{
                name: 'original_price',
                editable: true,
                editrules: {
                    required: true,
                    number: true,
                    min: 0
                }
            }, {
                name: 'current_price',
                editable: true,
                editrules: {
                    required: true,
                    number: true,
                    min: 0
                }
            }, {
                name: 'discount_type',
                stype: 'select',
                searchoptions: {
                    sopt: ["eq" , "ne"],
                    value: "0:5折;1:2.5折;2:1折"
                },
                editable: true,
                edittype: 'select',
                editoptions: {
                    value: "0:5折;1:2.5折;2:1折"
                },
                formatter: function(cellvalue) {
                    switch (cellvalue) {
                        case "0":
                            return '5折';
                        case "1":
                            return '2.5折';
                        case "2":
                            return '1折';
                    }
                    return "";
                }
            }, {
                name: 'fee',
                editable: true,
                editrules: {
                    required: true,
                    number: true,
                    min: 0
                }
            },{
                name: 'is_on_sale',
                stype: 'select',
                searchoptions: {
                    sopt: ["eq" , "ne"],
                    value: "0:正常;1:关闭;2:王者荣耀版"
                },
                editable: true,
                edittype: 'select',
                editoptions: {
                    value: "0:正常;1:关闭;2:王者荣耀版"
                },
                formatter: function(cellvalue) {
                    cellvalue = cellvalue.toString();
                    switch (cellvalue) {
                        case "0":
                            return '正常';
                        case "1":
                            return '关闭';
                        case "2":
                            return '王者荣耀版';
                    }
                    return "";
                }
            },{
                name: 'image',
                editable: true,
                hidden:'true',
                edittype:'custom',
                search: false,
                editoptions:{custom_element:function(element,options){
                    return "<img class='fileimg' src='"+element+"' width='60'/><input type='button' onclick='doUpload()' id='fileupload' value='修改' name='image'/>";
                },custom_value:function(elem, operation, value){
                    if (operation === 'get') {
                        return $(elem).attr('src');
                    } else if (operation === 'set') {
                        $('.fileimg').attr('src',value);
                        return $(elem).html();
                    }
                }}
            },{
                name: 'resc',
                editable: true,
                edittype:'custom',
                hidden:'true',
                search: false,
                editoptions:{custom_element:function(element,options){
                    return '<ul id="myTab" class="nav nav-tabs"><li class="active"><a href="spec" class="ahid" data-toggle="tab">商品参数</a></li><li><a href="service" class="ahid" data-toggle="tab">售后保障</a></li><li><a href="description" class="ahid" data-toggle="tab">商品介绍</a></li></ul><div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="_spec"></div><div class="tab-pane fade" id="_service"></div><div class="tab-pane fade" id="_description"></div></div>';
                },custom_value:mvalue}
            }, {
                name: 'spec',
                editable: true,
                edittype:'textarea',
                hidden:true,
                search: false
            }, {
                name: 'description',
                editable: true,
                edittype:'textarea',
                hidden:true,
                search: false
            }, {
                name: 'service',
                editable: true,
                edittype:'textarea',
                hidden:true,
                search: false
            }],
            datatype: "json",
            // loadonce:true,
            caption: '<i class="fa fa-table"></i> {{$label2}}',
            editurl: "/product/edit",
            sortname: "sort",
            sortorder: "asc",
            height:'auto',
            autowidth: true,
            pager: "#prowed3"
        };

        $('#rowed3').jqGrid(data).navGrid('#prowed3',
            {edit:true,add:true,search:true,del:true,refresh:true,view: true, position: "left", cloneToTop: false},
            {
                beforeShowForm: function (e) {
                    if($('#cke_spec').attr('id') !== 'cke_spec'){
                        $('#editmodrowed3').width(1000);
                        $('#tr_spec,#tr_description,#tr_service').show();
                        $('#spec,#service,#description').ckeditor({"filebrowserUploadUrl" : "/product/upload?_token={{csrf_token()}}&type=file"});
                        $('#tr_description,#tr_service').hide();
                    }
                    $('.ahid').click(function(){
                        $('#tr_spec,#tr_description,#tr_service').hide();
                        $('#tr_'+$(this).attr('href')).show();
                    })
                },
                closeAfterEdit: true,
                beforeInitData:function(e){
                    if(CKEDITOR.instances['spec']){
                        CKEDITOR.instances['spec'].destroy();
                        CKEDITOR.instances['service'].destroy();
                        CKEDITOR.instances['description'].destroy();
                    }
                },
                afterSubmit:function(response,postdata){
                    var state = $.parseJSON(response.responseText);
                    if(state.success){
                         $.gritter.add({
                             text:'修改成功',
                             sticky: false,
                             class_name: 'gritter-light',
                             time: '3'});
                    }
                    var $self = $(this), p = $self.jqGrid("getGridParam");
                    p.datatype = "json";
                    $self.trigger("reloadGrid", { page: p.page, current: true });
                    return [true];
                }
            },
            {
                beforeShowForm: function (e) {
                    if($('#cke_spec').attr('id') !== 'cke_spec'){
                        $('#editmodrowed3').width(1000);
                        $('#tr_spec,#tr_description,#tr_service').show();
                        $('#spec,#service,#description').ckeditor({"filebrowserUploadUrl" : "/product/upload?_token={{csrf_token()}}&type=file"});
                        $('#tr_description,#tr_service').hide();
                    }
                    $('.ahid').click(function(){
                        $('#tr_spec,#tr_description,#tr_service').hide();
                        $('#tr_'+$(this).attr('href')).show();
                    })
                },
                closeAfterAdd:true,
                beforeInitData:function(e){
                    if(CKEDITOR.instances['spec']){
                        CKEDITOR.instances['spec'].destroy();
                        CKEDITOR.instances['service'].destroy();
                        CKEDITOR.instances['description'].destroy();
                    }
                },
                afterSubmit:function(response,postdata){
                    var state = $.parseJSON(response.responseText);
                    if(state.success){
                        $.gritter.add({
                            text:'添加成功',
                            sticky: false,
                            class_name: 'gritter-light',
                            time: '30'});
                    }
                    var $self = $(this), p = $self.jqGrid("getGridParam");
                    p.datatype = "json";
                    $self.trigger("reloadGrid", { page: p.page, current: true });
                    return [true];
                }
            },{},
                {
                 multipleSearch: true,
                    closeAfterSearch: true,
                    closeOnEscape: true
                }
        );

        function mvalue(elem, operation, value) {
            $('.ahid:first').click();
            $('#tr_description,#tr_service').hide();
            $('#tr_spec').show();
            return true;
        }
        
    });
</script>

@endsection